<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>LabeledMarker Example: Toggling Marker Groups & Labels</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow"
      type="text/javascript"></script>
    <script type="text/javascript">
      document.write('<script type="text/javascript" src="../src/labeledmarker' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
    </script>
    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png';
    iconBlue.shadow = '';
    iconBlue.iconSize = new GSize(32, 32);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(16, 16);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var markersAll = [];
    var showing = true;
    var map = null;

    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(47.614495, -122.341861), 13);

        GDownloadUrl("markerdata.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var label = markers[i].getAttribute("label");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, label, address, type);
            map.addOverlay(marker);
            markersAll.push(marker);
          }
        });
      }
    }

    function createMarker(point, name, label, address, type) {
      var marker = new LabeledMarker(point, {icon: iconBlue, labelText: label, labelOffset: new GSize(-6, -10)});
      var html = "<b>" + name + "</b> <br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function toggleGroup() {
      for (var i = 0; i < markersAll.length; i++) {
        if (showing) {
          map.removeOverlay(markersAll[i]);
        } else {
          map.addOverlay(markersAll[i]);
        }
      } 
      showing = !showing;
    }
    //]]>
  </script>
  </head>

  <body style="font-family:Arial, sans serif" onload="load()" onunload="GUnload()">
   <br/>
    <input type="button" value="Add/Remove" onclick="toggleGroup()"/>
    <div id="map" style="float:left; width: 300px; height: 250px; border: 1px solid black"></div>
  </body>
</html>


